<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <div class="top"></div>

    <!-- ------ -->
    <!-- ------ -->
    <!-- ------ -->

    <div class="mi-search">
        <div class="container">
            <div class="search-container">
                <div class="container-main">
                    <div class="breadcrumbs">
                        <div class="container">
                            <a href="./index.html">首页</a>
                            <span>></span>
                            <a href="">全部结果</a>
                            <span>></span>
                            <span id="goodsKey">全部商品</span>
                        </div>
                    </div>

                    <!-- --------- -->

                    <div class="search-filter">
                        <div class="filter-wrap">
                            <div class="filter-list">
                                <ul class="item show-less">
                                    <span class="label">分类:</span>
                                    <li class="active">全部</li>
                                    <li>小米手机</li>
                                    <li>黑鲨手机</li>
                                    <li>小米电视</li>
                                    <li>红米电视</li>
                                    <li>小米笔记本</li>
                                    <li>红米笔记本</li>
                                    <span class="more-btn">
                                        更多
                                        <i class="iconfont">&#xe62e;</i>
                                    </span>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- ---------- -->

                    <div class="search-result">
                        <div class="reuslt-order">
                            <div class="order-list-box">
                                <ul class="order-list">
                                    <li class="changeId">
                                        <a href="javascript:;" class="active">综合</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">新品</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">销量</a>
                                    </li>
                                    <li class="changePrice">
                                        <a href="javascript:;">价格</a>
                                        <i class="price-jt down"></i>
                                    </li>
                                </ul>
                            </div>
                            <div class="goods-list-box">
                                <div class="goods-list cl">
                                    <!-- <div class="goods-item">
                                        <a href="">
                                            <div class="figure-img">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/597dc0f15e44d85928711966d540ed71.jpg"
                                                    alt="">
                                            </div>
                                            <h2 class="title">小米电视大师 82英寸至尊纪念版 灰色</h2>
                                            <p class="price">
                                                <span>49999元</span>
                                            </p>
                                        </a>
                                    </div>
                                    <div class="goods-item">
                                        <a href="">
                                            <div class="figure-img">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/597dc0f15e44d85928711966d540ed71.jpg"
                                                    alt="">
                                            </div>
                                            <h2 class="title">小米电视大师 82英寸至尊纪念版 灰色</h2>
                                            <p class="price">
                                                <span>49999元</span>
                                            </p>
                                        </a>
                                    </div>
                                    <div class="goods-item">
                                        <a href="">
                                            <div class="figure-img">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/597dc0f15e44d85928711966d540ed71.jpg"
                                                    alt="">
                                            </div>
                                            <h2 class="title">小米电视大师 82英寸至尊纪念版 灰色</h2>
                                            <p class="price">
                                                <span>49999元</span>
                                            </p>
                                        </a>
                                    </div>
                                    <div class="goods-item">
                                        <a href="">
                                            <div class="figure-img">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/597dc0f15e44d85928711966d540ed71.jpg"
                                                    alt="">
                                            </div>
                                            <h2 class="title">小米电视大师 82英寸至尊纪念版 灰色</h2>
                                            <p class="price">
                                                <span>49999元</span>
                                            </p>
                                        </a>
                                    </div>
                                    <div class="goods-item">
                                        <a href="">
                                            <div class="figure-img">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/597dc0f15e44d85928711966d540ed71.jpg"
                                                    alt="">
                                            </div>
                                            <h2 class="title">小米电视大师 82英寸至尊纪念版 灰色</h2>
                                            <p class="price">
                                                <span>49999元</span>
                                            </p>
                                        </a>
                                    </div> -->

                                </div>
                                <div class="mi-pagenav">
                                    <span class="first iconfont">&#xe607;</span>
                                    <!-- <a href="" class="active">1</a>
                                    <a href="">2</a>
                                    <a href="">3</a>
                                    <a href="">4</a>
                                    <span class="number">...</span>
                                    <a href="">5</a> -->
                                    <span class="next iconfont">&#xe605;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ------ -->
    <!-- ------ -->
    <!-- ------ -->

    <div class="footer"></div>
</body>
<script>

    $(function () {
        $(document).ready(function () {
            $(".top").load("./header.html")
            $(".footer").load("./footer.html")
        })

        // key, orderCol, orderType, pageIndex
        var goodsKey = " ";
        var orderCol = "goodsId";
        var orderType = "asc";
        var pageIndex = 1;

        var goodsName = urlParse();
        console.log(goodsName);
        var goodsKey = goodsName.key;
        console.log(goodsKey);
        if (goodsName) {
            // key = goodsKey
            goodsKey = decodeURI(goodsKey)
            $("#goodsKey").text(goodsKey)

        } else {
            $("#goodsKey").text("全部商品")
            goodsKey = " ";
        }

        loadGrade();

        // $(body).on("click", ".pageIndex", function () {
        //     console.log(6666);
        //     
        // })

        $(".goods-list-box").on("click", ".pageIndex", function () {
            // console.log(6666);
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            pageIndex = $(this).text() * 1
            // console.log($(this).text());
            loadGrade();
            gotoTop()
        });
        $(".goods-list-box").on("click", ".first", function () {
            // console.log(6666);
            if (pageIndex <= 1) {
                pageIndex = 1
            } else {
                pageIndex = pageIndex--
            }

            console.log(pageIndex);
            loadGrade();
            gotoTop();
        });
        $(".goods-list-box").on("click", ".next", function () {
            if (pageIndex >= $(".mi-pagenav a").size()) {
                pageIndex = $(".mi-pagenav a").size()
            } else {
                pageIndex++
            }
            console.log($(".mi-pagenav a").size());
            console.log(pageIndex);
            loadGrade();
            gotoTop();
        });

        $(".changePrice").click(function () {
            $(this).siblings().children("a").removeClass("active")
            $(this).children("a").addClass("active")

            orderCol = "goodsPrice";
            // orderType = "desc";
            if (orderType == "desc") {
                orderType = "asc"
                $(".price-jt").removeClass("down");
                $(".price-jt").addClass("up");
            } else {
                orderType = "desc";
                $(".price-jt").removeClass("up");
                $(".price-jt").addClass("down");
            }
            loadGrade()
        })

        $(".changeId").click(function () {
            $(this).siblings().children("a").removeClass("active")
            $(this).children("a").addClass("active")
            orderCol = "goodsId";
            loadGrade();
        })



        function loadGrade() {
            // 当搜索的关键字为空时 默认会搜索全部
            searchGradeOrderLimit({ key: goodsKey, orderCol, orderType, pageIndex, showNum: "20" }).then(data => {
                var { status, msg, currentIndex, count, maxPage, list } = data;
                if (status) {
                    var html = ""
                    list.forEach(function (item) {
                        console.log(item);

                        var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                        html += `<div class="goods-item">
                                <a href="./detail.html?gid=${goodsId}"}>
                                    <div class="figure-img">
                                        <img src="${goodsImg}" alt="">
                                    </div>
                                    <h2 class="title">${goodsName}</h2>
                                    <p class="price">
                                        <span>${goodsPrice}元</span>
                                    </p>
                                </a>
                            </div>`
                    })
                    $(".goods-list").html(html);
                    var pageNum = Math.ceil(count / 20);
                    var html = ""
                    $(".mi-pagenav a").remove();
                    for (let i = 1; i <= pageNum; i++) {
                        html += `<a href="javascript:;" class="pageIndex">${i}</a>`
                    }
                    $(".mi-pagenav .first").after(html);
                    $(".mi-pagenav").children().eq(currentIndex).addClass("active");
                } else {
                    $(".goods-list-box").html(`<div class="noGoods">
                                        <img src="../images/icon-search-empty.3d766c8b3f.png" alt="">
                                        <div class="noGoods-tit">对应筛选条件下没有找到商品，换个筛选条件吧</div>
                                    </div>`)
                }
            }).catch(err => {
                throw err;
            })
        }

    })
    // var newtop = "";
    function gotoTop() {
        $('body,html').animate({
            scrollTop: 0
        }, 1000)
    }

    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {
            // console.log(search);
            var str = search.substr(1);
            var list = str.split("&");
            // console.log(list);
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            }
            // console.log(data);
        }
        return data;
    }
</script>

</html>